About SSR

這幾天將一些範例更新到首頁上，並透過 SSG 放到 Cloudflare，發現了一些奇怪的問題，在 開發模式中就好好的，但是 page build 上到雲端上，就不如預期

關於SSR在Carousel中的影響

• 使用到 window 會報錯，因為在 Nodejs 中沒有這個變數
• 避免 SSR在CSR進行水合時，UI 渲染錯誤
• 原本使用 ulid 綁定在
  中，在插入 標籤指定id bear-carousel_id 的樣式，但若元件重新渲染則會導致 產生新的id，變成樣式設定不到

Error: Hydration failed because the initial UI does not match what was rendered on the server.

做了哪些改動

• 將 window 的部分改為 GlobalThis.window，無法使用在建構子進行跟 window 有關的項目，所以會有一些邏輯拆分的情況異動，使用 useState 在 useEffect 進行更新狀態來判斷 是CSR (如果是 class component 則是 this.setState 和 componentDidMount)，並且將會使用到 window 的部分加上 isClientOnly ce0537c4
• 不使用 id 的方式設定樣式，改為 css 變數的方式讓 style css file 使用，並刪除對 ulid 的依賴 9b438c3